vlwkaos' digital garden

Redux summary

리덕스 초 간편 리뷰

store는 모든 state를 관장하는 object. state는 readonly 원칙 defaultState를 정의하고 reducer의 state 인자 default값으로 주기

const reducer = (state = defaultState, action) => {로직에 따른 state값 리턴}; 
const store = Redux.createStore(reducer);

  • state가져오기 store.getState()

  • redux action정의: 모든 state의 갱신은 action으로 행해진다. action은 무조건 type 필드를 갖는다. 이외의 필드로 다른 정보를 전달 가능 let action = {type: 'LOGIN'}; let actionCreator = () => action;

  • action을 redux store에 전달하기 위해 Action Creator가 필요하다

  • dispatch action store.dispatch(actionCreator()) 이런 식으로 action을 전달

  • action.type은 const LOGIN = 'LOGIN' 같이 리소스 관리?

  • store.subscribe(listener function) 이러면 dispatch될 때마다 listener function로 같이 호출 됨.

  • reducer여러개 쓰려면 const combinedReducer = Redux.combineReducers({auth: reducer1, notes: reducer2}) 이런 식으로 하고 스토어 만들 때 넘기기

const INCREMENT = 'INCREMENT'; // define a constant for increment action types
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const counterReducer = (state = 0, action) => {
  switch (action.type){
    case INCREMENT: return state+1;
    case DECREMENT: return state-1;
    default: return state;
  }
}; // define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = () => ({type:INCREMENT}); // define an action creator for incrementing

const decAction = () => ({type:DECREMENT}); // define an action creator for decrementing

const store = Redux.createStore(counterReducer); // define the Redux store here, passing in your reducers

Referred in

Redux summary